<template>
	<div class="myContent">
        <!--头部-->
		<my-header :title="'小饭桌'" :hasTitle="true" :hasBack="true" ></my-header>
		<!--<div style="height:2rem;"></div>-->
		<div class="centent" style="flex:1;overflow-y:auto;">
			<div style="background: #fff;width: 100%;">
				<!--头部图片-->
				<div>
					<img src="static/image/smallRice_01.jpg"/>
				</div>
				<!--头部图片 end-->
				<!--商品列表-->
				<div class="shopItem" v-for="item in 5">
					<div class="zxtitle">
						<div><i>图标</i></div>
						<div>副标题</div>
						<div><span class="mainTitle">主标题</span></div>
					</div>
					<div>
						<img src="static/image/smallRice_02.jpg" class="imgCenter"/>
					</div>
					<div class="bottomW">
						<span style="float: left;">两菜一汤。幸福如此简单</span>
						<span style="float: right;">查看详情</span>
						<div style="clear: both;"></div>
					</div>
					
				</div>
			</div>
			
			<!--商品列表 end-->
			<!--底部推荐-->
			<div>
				<div class="myNav"> 
					<span v-for="item in 5" class="myNavItem">
						冬暖冬暖
					</span>
				</div>
				<div class="imgGroup">
					<div v-for="item in 9" class="imgItem">
						<div class="imgGroupImg">
							<img src="../../../static/image/smallRice_02.jpg" alt="" />
						</div>
						<div class="imgGroupTop">
							<span>【减满】阳澄湖母蟹</span>
						</div>
						<div class="imgGroupCenter">
							<span>海鲜盛宴</span>
						</div>
						<div class="imgGroupBottom">
							<span>99/只</span>
							<span><i>购物车</i></span>
							<span style="clear: both;"></span>
						</div>
					</div>
				</div>
			</div>
			<!--底部推荐 end-->
			
		</div>
	</div>

</template>

<script>

import {mapGetters,mapMutations} from "vuex";
import Header from "../header";
	export default {
	  	name: 'hello',
	  	data () {
	    	return {
				
			}
		},
		computed: {
			
		},
		components: {
	       "my-header": Header
	    },
	    methods: {
	    	
	    },
		created () {
			
		},
		mounted () {
			// initDomTree(this.getDomTree[this.page]);
			
		},
		updated() {
			//页面更新完毕
			// initDomTree(this.getDomTree[this.page]);
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.myContent{
		width: 100%;
	    height: 100%;
	    display: flex;
	    flex-direction: column;
	    justify-content: space-between;
	}
	/*商品列表*/
	.shopItem{
		margin-bottom: 2rem;
	}
	.zxtitle{
		margin-bottom: 1rem;
	}
	.mainTitle{
		font-size: 20px;
		border-bottom: 2px solid black;  
		padding-bottom: 0.08rem;
	}
	.bottomW{
		width: 100%;
		padding: 0.5rem 2rem;
	}
	.bottomW span:first-child{
		vertical-align: bottom;
		display: inline-block;
		padding-top: 0.25rem;
		width: 65%;
		text-align: left;
	}
	.bottomW span:nth-of-type(2){
		background: #313131;
		color: #fff;
		padding:0.1rem 0.5rem;
		border-radius: 0.2rem;
	}
	.imgCenter{
		margin: 0 auto;
	}
	/*商品列表*/
	.imgGroup{
		display: flex;
		flex-wrap: wrap;
		font-size: 12px;
		padding-left: 0.75rem;
		padding-right: 0.25rem;
	}
	.imgGroupImg img{
		padding-top: 0.5rem;
		margin-bottom: 0.5rem;
	}
	
	.imgItem{
		background: #FFF;
		border-radius: 0.5rem;
		margin-right: 0.5rem;	
		margin-bottom: 1rem;
	}
	.imgGroup > div{
		width: 30%;
	}
	.imgGroupTop{
		text-align: left;
		margin-bottom: 0.5rem;
	}
	.imgGroupCenter{
		text-align: left;
		margin-bottom: 0.5rem;
	}
	.imgGroupCenter span{
		border:1px solid red;
		color: red;
		background: #FFF;
		border-radius: 0.3rem ;
		padding: 0.1rem;
		margin-left: 0.2rem;
	}
	.imgGroupBottom{
		
	}
	.imgGroupBottom span:nth-of-type(1){
		float: left;
		padding-left: 0.2rem;
		padding-bottom: 0.3rem;
	}
	.imgGroupBottom span:nth-of-type(2){
		float: right;
		padding-right: 0.2rem;
		padding-bottom: 0.3rem;
	}
	/*导航*/
	.myNav{
		overflow-x: scroll;
		overflow-y: hidden;
	}
	.myNavItem{
		text-align: center;
		
	}
</style>